<!-- 缴费详情 -->
<template>
    <div class="content">
        <!-- 按编号搜索 -->
        <div class="nameSearch">
            <el-input v-model="searchName" style="width: 17vw" placeholder="按编号查询（可选）" clearable>
                <template #append>
                    <el-button :icon="Search" @click="getElderInfoByElderId(searchName)" />
                </template>
            </el-input>
        </div>
        <!-- 用户名单表格 -->
        <el-table :data="elderInfo" style="width: 100%" default-expand-all>
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="elderId" label="编号" width="120" />
            <el-table-column prop="admissionTime" label="入院日期" width="150" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="gender" label="性别" width="120" />
            <el-table-column prop="birthdate" label="出生日期" width="150" />
            <el-table-column prop="bedPlace" label="床位" width="180" />
            <el-table-column fixed="right" label="系统余额" min-width="120">
                <template #default="{ row }">
                    {{ row.balance }} 元
                </template>
            </el-table-column>
        </el-table>
        <!-- 费用按钮 -->
        <div class="feeBtn">
            <el-tooltip class="box-item" effect="dark" content="住宿费+伙食费+护工费（面向所有人）" placement="top-start">
                <el-button type="primary" @click="fixationDialogVisible = true">一键发布固定费用<el-icon class="btnIcon">
                        <QuestionFilled />
                    </el-icon></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="其他费用，如药费（面向指定用户）" placement="top-start">
                <el-button type="warning" @click="specialDialogVisible = true">特殊费用<el-icon class="btnIcon">
                        <QuestionFilled />
                    </el-icon></el-button>
            </el-tooltip>
        </div>
        <!-- 固定费用弹窗 -->
        <el-dialog v-model="fixationDialogVisible" title="输入月固定费用" width="400" align-center>
            <div>
                <span>住宿费</span><el-input v-model="fixationFeeInfo.stayCost" style="width: 200px; margin-left: 10px">
                    <template #append>元</template></el-input>
            </div>
            <div>
                <span>伙食费</span><el-input v-model="fixationFeeInfo.foodCost" style="width: 200px; margin: 10px 10px">
                    <template #append>元</template>
                </el-input>
            </div>
            <div>
                <span>护工费</span><el-input v-model="fixationFeeInfo.nursingCost" style="width: 200px; margin-left: 10px">
                    <template #append>元</template></el-input>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="fixationDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="pushFixedCost">
                        确认发布
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 特殊费用弹窗 -->
        <el-dialog v-model="specialDialogVisible" title="输入月特殊费用" width="400" align-center>
            <div>
                <span>用户编号</span><el-input v-model="specialFeeInfo.elderId" style="width: 200px; margin-left: 10px">
                </el-input>
            </div>
            <div>
                <span>总费</span><el-input v-model="specialFeeInfo.specialCost" style="width: 200px; margin: 10px 37px">
                    <template #append>元</template></el-input>
            </div>
            <div>
                <span>备注</span><el-input v-model="specialFeeInfo.remark" style="width: 200px; margin-left: 37px">
                </el-input>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="specialDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="pushSpecialCost">
                        确认发布
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { SpecialFeeInfo, FixationFeeInfo, ElderInfo } from "@/API/interface/payment";
import { getAllElderInfoApi, getElderInfoByElderIdApi, pushFixedCostApi, pushSpecialCostApi } from "@/API/interface/payment";
import { ElMessage } from "element-plus";

const searchName = ref("");
const elderInfo = ref<ElderInfo[]>([])
const fixationDialogVisible = ref(false); //固定费用弹窗
const specialDialogVisible = ref(false); //特殊费用弹窗
// 固定费用信息
const fixationFeeInfo = ref<FixationFeeInfo>({
    stayCost: null, //住宿费
    foodCost: null, //伙食费
    nursingCost: null, //护工费
});
//特殊费用
const specialFeeInfo = ref<SpecialFeeInfo>({
    elderId: "", // 用户编号
    specialCost: null, // 总费
    remark: "", // 备注
});
// 获取表格数据
onMounted(
    // 获取表格数据
    async () => {
        const res = await getAllElderInfoApi();
        console.log("获取所有老人信息", res.data);
        // 把数据赋值给表格数据
        elderInfo.value = res.data.data;
    }
)
// 根据elderId获取老人信息
const getElderInfoByElderId = async (searchName1: string) => {
    await getElderInfoByElderIdApi(searchName1).then((res) => {
        console.log("获取老人信息返回", res.data);
        if (res.data.code == 200) {
            //弹窗查询成功
            ElMessage({
                message: '查询成功',
                type: 'success',
            });
            // 确保 elderInfo.value 是一个数组
            elderInfo.value = Array.isArray(res.data.data) ? res.data.data : [res.data.data];
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error',
            });
        }
        // 清空搜索框
        searchName.value = '';
    })
};
// 发布月固定费用
const pushFixedCost = async () => {
    try {
        // 转为number类型
        const preparedFixationFeeInfo = {
            stayCost: fixationFeeInfo.value.stayCost !== null ? Number(fixationFeeInfo.value.stayCost) : null,
            foodCost: fixationFeeInfo.value.foodCost !== null ? Number(fixationFeeInfo.value.foodCost) : null,
            nursingCost: fixationFeeInfo.value.nursingCost !== null ? Number(fixationFeeInfo.value.nursingCost) : null,
        };
        await pushFixedCostApi(preparedFixationFeeInfo).then((res: any) => {
            if (res.data.code === 200) {
                ElMessage({
                    message: '发布成功',
                    type: 'success',
                })
                getAllElderInfoApi().then((res: any) => {
                    if (res.data.code === 200) {
                        elderInfo.value = res.data.data;
                    }
                })
            }
        })
    } catch (error) {
        ElMessage({
            message: '发布失败',
            type: 'error',
        });
    } finally {
        // 清空fixationFeeInfo的内容
        fixationFeeInfo.value = {
            stayCost: null,
            foodCost: null,
            nursingCost: null,
        }
        // 关闭弹窗
        fixationDialogVisible.value = false
    }
}
// 发布特殊费用
const pushSpecialCost = async () => {
    try {
        // 转为number类型
        specialFeeInfo.value.specialCost = Number(specialFeeInfo.value.specialCost);
        await pushSpecialCostApi(specialFeeInfo.value).then((res: any) => {
            if (res.data.code === 200) {
                ElMessage({
                    message: '发布成功',
                    type: 'success',
                })
                getAllElderInfoApi().then((res: any) => {
                    if (res.data.code === 200) {
                        elderInfo.value = res.data.data;
                    }
                })
            } else {
                ElMessage({
                    message: res.data.message,
                    type: 'error',
                })
            }
        })
    } catch (error) {
        ElMessage({
            message: '发布失败',
            type: 'error',
        });
    } finally {
        // 清空fixationFeeInfo的内容
        specialFeeInfo.value = {
            elderId: '',
            specialCost: null,
            remark: '',
        }
        // 关闭弹窗
        specialDialogVisible.value = false
    }
}

</script>

<style lang="less" scoped>
.nameSearch {
    margin: 1vh 0;
}

.feeBtn {
    // display: flex;
    // justify-content: right;
    // margin: 1vh 1vw;
    position: fixed;
    right: 3vw;
    bottom: 3vh;

    .btnIcon {
        margin-left: 0.1vw;
    }
}
</style>